import { useState } from 'react'
import style from './index.module.scss'
import { Tabs, Image } from 'antd-mobile'
import Lists from '@/component/List'
import { categoryRightListType } from '@/type/category'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { saveID } from '@/reduxToolkit/reducers/productID'

const RigthTab = (props: {menuID: number}) => {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const [title] = useState(['畅销', '新书', '精选'])  
  const [typeList] = useState(['sales', 'price', 'comments_count'])
  const [activeType, setActiveType] = useState('sales') // 当前下标

  // 跳转详情页
  const goDetail = (id: number) => {
    navigate('/detail')
    dispatch(saveID(id))
  }

  const getContent = () => {
   return title.map((item, index) => {
     return (
        <Tabs.Tab title={item} key={typeList[index]}>
          <div className={style.listBox}>
            <Lists page='category' type={activeType} menuID={props.menuID} getlist={(goodList: []) => {
               return goodList.map((itemB: categoryRightListType) => {
                 return (
                    <div className={style.item} key={itemB.id} onClick={() => goDetail(itemB.id) }>
                      <div className={style.left}><Image src={itemB.cover_url}/></div>
                      <div className={style.right}>
                        <p className={style.title}>{itemB.title}</p>
                        <p className={style.desc}>值得购买的一本书</p>
                        <p className={style.price}>￥{itemB.price}</p>
                      </div>
                    </div>
                 )
               })
            }}></Lists>
          </div>
        </Tabs.Tab>
     )
   })
  }
  return (
    <>
      <div className={style.tab}>
        <Tabs style={{ '--title-font-size': '15px' }} onChange={(key: string) => setActiveType(key)}>
          {getContent()}
        </Tabs>
      </div>
    </>
  )
}

export default RigthTab